import { defineComponent } from 'vue'
import {
  StudioPanel,
  Designer,
  IconWidget,
  Button,
  CompositePanel,
  CompositePanelItem,
  ResourceWidget,
  WorkspacePanel,
  SettingsPanel,
  ToolbarPanel,
} from './components'
import { createResource } from './core'

const Logo = defineComponent({
  setup() {
    return () => (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <IconWidget
          infer="https://img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg"
          style={{ width: 160, height: 24 }}
        />
      </div>
    )
  },
})

const Actions = defineComponent({
  setup() {
    return () => (
      <div>
        <Button icon="Github">Github</Button>
        <Button icon="Abno" iconPosition="right">
          预 览
        </Button>
        <Button icon="Bug">调 试</Button>
        <Button>立即发布</Button>
      </div>
    )
  },
})

const Input = createResource({
  title: {
    'zh-CN': '输入框',
    'en-US': 'Input',
  },
  icon: 'InputSource',
  elements: [
    {
      componentName: 'Field',
      props: {
        title: '输入框',
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
      },
    },
  ],
})

export const App = defineComponent({
  setup() {
    return () => (
      <Designer>
        <StudioPanel logo={<Logo />} actions={<Actions />}>
          <CompositePanel>
            <CompositePanelItem title="panels.Component" icon="Component">
              <ResourceWidget title="sources.Inputs" sources={[Input]} />
            </CompositePanelItem>
            <CompositePanelItem title="panels.History" icon="Outline">
              <h2>dfsdfsdfdsfd</h2>
            </CompositePanelItem>
            <CompositePanelItem title="panels.History" icon="History">
              <h2>fdsfsdf123132456</h2>
            </CompositePanelItem>
          </CompositePanel>
          <WorkspacePanel>
            <ToolbarPanel></ToolbarPanel>
          </WorkspacePanel>
          <SettingsPanel title="panels.PropertySettings"></SettingsPanel>
        </StudioPanel>
      </Designer>
    )
  },
})
